<link href="{$base_dir}index.php/css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="{$base_dir}js/jquery.ocupload-1.1.2.js"></script>
<script type="text/javascript" src="{$base_dir}js/json2.js" ></script>
<script type="text/javascript" src="{$base_dir}js/jquery.lightbox-0.5.min.js" ></script>
{literal}
<script type="text/javascript">
$(document).ready(function(){
	$('#photoUpload').upload({
		action: "../Document/uploadDocumentAjax?set_ajax_view",
		onSubmit: function() {
			{/literal}			
			$('#progress1').text('{translate}File is uploading{/translate}...');
			{literal}
		},
		onComplete: function(data) {
			$('#progress2').text('');
			//data contains the response from the action url			
			var obj = JSON.parse(data);
			// Check for error message
			if (obj.message != "") {
				$('#progress1').text(obj.message);
			} else {
				{/literal}
				$('#progress1').text('{translate}File uploaded successful{/translate}!');
				newRow = "<tr id='" + obj.document_id + "'>" + 
				             "<td class='first'><a class='lightbox' href='" + obj.url + "'><img border=0 src='" + obj.thumnail_url + "' alt='" + obj.name + "'/></a></td>" +
				             "<td valign='top'><span id='created'>{translate}Uploaded date{/translate}: " + obj.created + "</span><br/><br/><span>{translate}Description{/translate}:</span><br/><div class='separator'></div>" +
				                 "<span id='" + obj.document_id + "Desc'>" + obj.name + "</span>" +
				                 "<textarea style='display: none;' id='" + obj.document_id + "NewDesc' cols='30' rows='4'></textarea><div class='separator'></div>" +
				             	 "<div align='right' id='" + obj.document_id + "EditDesc'><a href=" + '"' + "javascript:editDesc('" + obj.document_id + "');" + '">{translate}Edit{/translate}</a></div>' +
								 "<div align='right' id='" + obj.document_id + "UpdateDesc' style='display: none;'>" +
								     "<a href=" + '"' + "javascript:saveDesc('" + obj.document_id + "');" + '">{translate}Save{/translate}</a> &nbsp;&nbsp;' +
								     "<a href=" + '"' + "javascript:cancelDesc('" + obj.document_id + "');" + '">{translate}Cancel{/translate}</a></div></td>' +
				             "<td class='last' valign='top'><a href=\"javascript:removeDoc('" + obj.document_id + "');\"><img class='imgBtn' src='../images/remove_small.png' border='0' title='{translate}Delete{/translate}'/></a></td>" +	
						"</tr>";
				{literal}
				$('table#all_thumnails tbody').prepend(newRow);	 			
				$('#gallery a.lightbox').lightBox({
		        	imageLoading: '../images/lightbox-ico-loading.gif',
					imageBtnClose: '../images/lightbox-btn-close.gif',
					imageBtnPrev: '../images/lightbox-btn-prev.gif',
					imageBtnNext: '../images/lightbox-btn-next.gif',
					imageBlank: '../images/lightbox-blank.gif'
		        });
			}
		}
	})	
});

function editDesc(docId){
	var description = $('#' + docId + 'Desc').text();
	$('#' + docId + 'Desc').hide();
	$('#' + docId + 'EditDesc').hide();
	$('#' + docId + 'NewDesc').val(description).show();
	$('#' + docId + 'UpdateDesc').show();
}

function cancelDesc(docId){
	$('#' + docId + 'NewDesc').val('').hide();
	$('#' + docId + 'UpdateDesc').hide();
	$('#' + docId + 'Desc').show();
	$('#' + docId + 'EditDesc').show();
}

function saveDesc(docId){
	$.post (
		'../Document/setDescription?set_ajax_view',
		{ 
			docId:		docId,
			newDesc: $('#' + docId + 'NewDesc').val()		
		},
		function(data) {
			$('#' + docId + 'NewDesc').val('').hide();
			$('#' + docId + 'UpdateDesc').hide();
			$('#' + docId + 'Desc').text(data).show();
			$('#' + docId + 'EditDesc').show();
		}
	);	
}

function removeDoc(docId){	
	{/literal}
	var mess = '{translate}Would you like to delete this document{/translate}?';
	{literal}
	promptConfirm(_("Delete"),mess, function() {     
		$.get (
	            '../Document/removeDocument?set_ajax_view',
	            {
	            docId: docId
	            },
	            function (data){
	                // Remove from UI
	                $('#' + docId).remove();
	                {/literal}
	                $('#progress1').text('{translate}Deleted{/translate}');
	                {literal}
	            }
	        );
        return true;
    },'YesNo','warn',_('No'));  
	
}

</script>
{/literal}
<div id="uploading">
	{include file="document/element_upload_document.html"}
</div>
<div class='separator'></div>
<div id="thumnails">
	{include file="document/element_all_thumnails.html"}
</div>